<script setup lang="ts">
import { computed, reactive, ref, toRaw } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import {
  order_set_api,
  create_order_api,
} from "@/package/mall/api/pass_port_order";
import { items_api } from "@/package/mall/api/member_address";
import { EV_ADDRESS } from "@/constant/event";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormStepper from "@/components/form/stepper.vue";
import FormWord from "@/components/form/word.vue";
import OrderSettleBar from "./components/order-settle-bar.vue";
import PopupBottom from "@/components/popup/bottom.vue";

onLoad((options) => {
  order_set_api({ specs_id: options?.id }).then((resp) => {
    infoData.is_universal_coupon = resp.is_universal_coupon;
    infoData.cover_pic = resp.cover_pic;
    infoData.product_name = resp.product_name;
    infoData.specs_name = resp.specs_name;
    infoData.price = resp.price;
    infoData.min_buy_num = resp.min_buy_num;
    infoData.max_buy_num =
      resp.max_buy_num === 0 ? resp.stock : resp.max_buy_num;
    infoData.shipping_instructions_name = resp.shipping_instructions_name;

    formData.num = resp.min_buy_num;

    // 设置默认地址

    items_api().then((resp) => {
      const address = resp.items.find((i) => i.is_default === 1);
      if (!address) return;
      formData.buy_name = address.name;
      formData.buy_phone = address.phone;
      formData.address = address.full_address;
      tempData.addressId = address.id;
    });
  });

  tempData.id = options?.id;

  tempData.guiderId = options?.guiderId;

  uni.$on(EV_ADDRESS, addressCallback);
});
onUnload(() => uni.$off(EV_ADDRESS, addressCallback));

const infoData = reactive({
  is_universal_coupon: 1,
  cover_pic: "",
  product_name: "",
  specs_name: "",
  price: "",
  min_buy_num: 1,
  max_buy_num: 1,
  shipping_instructions_name: "",
});

const formData = reactive({
  buy_name: "",
  buy_phone: "",
  address: "",
  num: 1,
  desc: "",
});

const addressClick = () => {
  Router.navigateTo(
    `/package/my/pages/address/list?type=select&id=${tempData.addressId}`
  );
};

const payPrice = computed(() => {
  return (Number(infoData.price) * formData.num).toFixed(2);
});

const detailVisible = ref(false);

const createClick = (type: "detail") => {
  if (type === "detail") {
    detailVisible.value = !detailVisible.value;
  } else {
    Toast.showLoading();
    create_order_api({
      specs_id: tempData.id,
      ...toRaw(formData),
      guider_id: tempData.guiderId,
    })
      .then((resp) => {
        Toast.hideLoading();
        Router.redirectTo(
          `/package/mall/pages/goods/settle?${Router.dataToQuery({
            id: resp.order_id,
            cover_pic: infoData.cover_pic,
            product_name: infoData.product_name,
            price: infoData.price,
            num: formData.num,
          })}`
        );
      })
      .catch(() => Toast.hideLoading());
  }
};

const addressCallback = (e: { type: "select"; data: any }) => {
  console.info(`触发事件：${EV_ADDRESS}`, e);
  if (e.type === "select") {
    const address = e.data;
    formData.buy_name = address.name;
    formData.buy_phone = address.phone;
    formData.address = address.full_address;
  }
};

const tempData = { id: "", addressId: "", guiderId: "" };
</script>

<template>
  <view
    class="order-address"
    v-if="infoData.is_universal_coupon !== 1"
    @click="addressClick"
  >
    <view class="order-address-content">
      <view style="display: flex; align-items: center">
        <image
          class="order-address-icon"
          src="@/package/mall/static/goods-order-position.png"
        />
        <view class="order-address-text">
          {{ formData.address || "请选择您的配送地址" }}
        </view>
      </view>
      <view class="order-address-name" v-if="formData.buy_name">
        {{ formData.buy_name }}&nbsp;{{ formData.buy_phone }}
      </view>
    </view>
    <image
      class="order-address-arrow"
      src="@/package/mall/static/goods-order-arrow.png"
    />
  </view>

  <view class="order-product">
    <image
      class="order-product-img"
      :src="infoData.cover_pic"
      mode="aspectFill"
    />
    <view style="flex-grow: 1; min-width: 0">
      <view class="order-product-name">{{ infoData.product_name }}</view>
      <view class="order-product-spec">已选：{{ infoData.specs_name }}</view>
    </view>
  </view>

  <view class="order-info">
    <view class="order-info-limit">
      <view class="order-info-limit2">
        <image
          class="order-info-limit3"
          src="@/package/mall/static/goods-order-limit.png"
        />
        每单限购{{ infoData.max_buy_num }}份
      </view>
    </view>
    <view class="order-info-item">
      <view class="order-info-label">购物数量</view>
      <view class="order-info-price">￥{{ infoData.price }}</view>
      <FormStepper
        v-model="formData.num"
        :min="infoData.min_buy_num"
        :max="infoData.max_buy_num"
      />
    </view>
    <view class="order-info-item">
      <view class="order-info-label">配送</view>
      <view class="order-info-value">
        {{ infoData.shipping_instructions_name }}
      </view>
    </view>
  </view>

  <view class="order-remark">
    <view class="order-remark-title">留言备注</view>
    <view class="order-remark-wrapper">
      <FormWord :modelValue="formData.desc.length" :maxlength="100">
        <textarea
          class="order-remark-input"
          v-model="formData.desc"
          auto-height
          placeholder="如您有更多需求，请留言告诉我们"
        />
      </FormWord>
    </view>
  </view>

  <PopupBottom v-model="detailVisible" title="费用明细" :zIndex="8">
    <view class="order-detail">
      <view class="order-detail-item">
        <view class="order-detail-name">{{ infoData.product_name }}</view>
        <view class="order-detail-price">￥{{ infoData.price }}</view>
      </view>
      <view class="order-detail-item">
        <view class="order-detail-spec">已选：{{ infoData.specs_name }}</view>
        <view class="order-detail-num">x{{ formData.num }}</view>
      </view>
    </view>
  </PopupBottom>
  <view class="order-fixed">
    <OrderSettleBar
      title="合计"
      :price="payPrice"
      detailVisible
      btnText="去结算"
      @btn-click="createClick"
    />
  </view>
</template>

<style lang="scss">
.order-address {
  display: flex;
  align-items: center;
  height: 156rpx;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
  background-color: #ffffff;

  .order-address-content {
    flex-grow: 1;
    min-width: 0;
  }

  .order-address-icon {
    width: 20rpx;
    height: 28rpx;
    margin-right: 12rpx;
  }

  .order-address-text,
  .order-address-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .order-address-text {
    flex-grow: 1;
    min-width: 0;
    font-size: 32rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
  }

  .order-address-name {
    margin-top: 12rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 42rpx;
  }

  .order-address-arrow {
    flex-shrink: 0;
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
  }
}

.order-product {
  display: flex;
  align-items: center;
  padding: 30rpx;
  padding-bottom: 0;
  background-color: #ffffff;

  .order-product-img {
    flex-shrink: 0;
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
  }

  .order-product-name {
    height: 88rpx;
    margin-bottom: 24rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .order-product-spec {
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.order-info {
  padding-top: 4rpx;
  padding-bottom: 2rpx;
  margin-bottom: 40rpx;
  background-color: #ffffff;

  .order-info-limit {
    display: flex;
    justify-content: flex-end;
    padding-right: 30rpx;
    margin-bottom: 20rpx;
  }

  .order-info-limit2 {
    display: flex;
    align-items: center;
    padding: 0 8rpx;
    font-size: 26rpx;
    color: #1bb942;
    line-height: 46rpx;
    border-radius: 4rpx;
    background-color: #f3fff6;
  }

  .order-info-limit3 {
    width: 24rpx;
    height: 24rpx;
    margin-right: 6rpx;
  }

  .order-info-item {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 40rpx;
  }

  .order-info-label,
  .order-info-value {
    font-size: 28rpx;
    color: #333333;
    line-height: 42rpx;
  }

  .order-info-value {
    color: #666666;
  }

  .order-info-price {
    padding-right: 30rpx;
    margin-left: auto;
    font-size: 36rpx;
    color: #ff4d42;
    line-height: 54rpx;
    font-weight: bold;
  }

  .order-info-value {
    flex-grow: 1;
    min-width: 0;
    text-align: right;
  }
}

.order-remark {
  .order-remark-title {
    padding-left: 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
  }

  .order-remark-wrapper {
    background-color: #ffffff;
  }

  .order-remark-input {
    display: block;
    width: 100%;
    min-height: 284rpx;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 50rpx;
    background-color: transparent;
    box-sizing: border-box;
  }
}

.order-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104rpx;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  z-index: 8;
}

.order-detail {
  padding-top: 20rpx;
  border-bottom: 122rpx solid #eeeeee;

  .order-detail-item {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 10rpx;
  }

  .order-detail-name,
  .order-detail-spec {
    flex-grow: 1;
    min-width: 0;
    font-size: 30rpx;
    color: #333333;
    line-height: 44rpx;
  }

  .order-detail-price {
    flex-shrink: 0;
    font-size: 32rpx;
    color: #666666;
    line-height: 40rpx;
    font-weight: bold;
  }

  .order-detail-spec {
    font-size: 26rpx;
    color: #666666;
  }

  .order-detail-num {
    flex-shrink: 0;
    font-size: 24rpx;
    color: #333333;
    line-height: 30rpx;
  }
}
</style>
